<template>
  <div class='container'>
    <el-card>
      <div class="nav">
        <div class="left">
          <span>关键字</span>
          <el-input placeholder="根据编号搜索" v-model="params.keyword"></el-input>
        </div>
        <div class="right">
          <el-button size="small" @click="eliminate">清除</el-button>
          <el-button size="small" type="primary" @click="getlist()">搜索</el-button>
        </div>
      </div>
      <div class="total">
        <i class="el-icon-info"></i>
        <span>数据一共{{total}}条</span>
      </div>
      <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="编号"
      width="210">
    </el-table-column>
    <el-table-column
      label="题型"
      width="100">
      <template #default="{row}">
            {{ formatType(row.questionType) }}
      </template>
    </el-table-column>
    <el-table-column
      prop="questionIDs"
      label="题目编号"
      width="200">
      <template slot-scope="scope">
        <!-- {{formatIDs(row.questionIDs)}} -->
        <div v-for="(item,index) in scope.row.questionIDs" :key="index">
          <p class="number" @click="preview(item.id)">{{item.number}}</p>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="addTime"
      label="录入时间"
      width="220">
    </el-table-column>
    <el-table-column
      prop="totalSeconds"
      label="答题时间(s)"
      width="120">
    </el-table-column>
    <el-table-column
      prop="accuracyRate"
      label="正确率(%)"
      width="120">
    </el-table-column>
    <el-table-column
      prop="userName"
      label="录入人"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      >
      <template #default="{row}">
        <el-button type="danger" icon="el-icon-delete" circle @click="delQuest(row.id)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      background
      :page-sizes="[2,3,5,10,20]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="params.page"
      :page-size="params.pagesize"
      layout="prev, pager, next,sizes, jumper"
      :total="total">
    </el-pagination>
    </el-card>
    <questions-preview :dialogVisible="dialogVisible" @closegb="closeDialog2" :questionType="questionType" :formData="formDate"></questions-preview>
  </div>
</template>

<script>
import QuestionsPreview from '@/module-hmmm/components/questions-preview.vue'
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
export default {
  name: 'Randoms',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      formDate: {},
      data: [], // 表格数据
      questionType: null, // 预览数据
      dialogVisible: false,
      tableData: [], // 表格数据
      params: { // 列表页
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      total: null // 列表总数
    }
  },

  mounted () {
    this.getlist()
  },
  methods: {
    async getlist () { // 列表渲染
      const res = await randoms(this.params)
      // console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    formatType (value) {
      const map = {
        3: '简答',
        1: '单选',
        2: '多选'
      }
      return map[value]
    },
    async preview (id) { // 点击预览
      // console.log(id)
      this.dialogVisible = true
      const res = await detail({ id: id })
      console.log(res.data)
      this.formDate = res.data
    },
    // formatIDs (value) {
    //   const res = value.map(item => {
    //     let num = ''
    //     if (item.number) {
    //       num += item.number
    //     }
    //     return num
    //   })
    //   const re = res.join('')
    //   return re
    // },
    handleSizeChange (page) { // 改变条数
      this.params.pagesize = page
      this.getlist()
    },
    handleCurrentChange (page) { // 改变页数
      this.params.page = page
      this.getlist()
    },
    delQuest (id) { // 删除
      this.$confirm('确定要删除吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(id)
        await removeRandoms({ id: id })
        this.getlist()
        this.$message.success('删除成功')
      }).catch(() => {

      })
    },
    eliminate () { // 清除
      this.params = {
        page: 1,
        pagesize: 10,
        keyword: ''
      }
      this.getlist()
    },
    closeDialog2 () {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
.container{
  margin: 10px 0;
  padding: 0 10px;
}

  .nav{
    display: flex;
    justify-content: space-between;
  }
  .nav .left span{
    font-weight: 700;
    font-size: 14px;
    margin-left: 20px;
    color: #606266;
  }
  .nav .left .el-input{
    width: 210px;
    margin-left: 20px;
    height: 30px;
    line-height: 30px;
  }
  .container .total{
    margin-top: 18px;
    height: 35px;
    background-color: #F4F4F5;
    display: flex;
    justify-content: start;
    align-items: center;
    color: #909399;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 20px;
  }
  .container .total i{
    margin-left: 16px;
    margin-right: 5px;
  }
  .number{
    color: #0099ff;
    cursor:pointer
  }
</style>
